@box-h:300px;
@box-w:300px;
@box-z-translate: 150px;

body {
	background: #f4f4f4;
}
#cube-area {
	text-align: center;
	.scroll-box {
		height: @box-h;
		width: @box-w;
		margin: 200px auto;
		transform-style: preserve-3d;
		animation: toScroll 5s linear infinite;
	}

	.cube {
		height: @box-h;
		width: @box-w;
		position: relative;
		transform-style: preserve-3d;
		transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);

		div {
			height: @box-h;
			width: @box-w;
			position: absolute;
			opacity: 0.68;
		}

		div:nth-of-type(1) {
			transform: translateZ(@box-z-translate);
		}
		div:nth-of-type(2) {
			transform: translateY(-50%) rotateX(-90deg);
		}
		div:nth-of-type(3) {
			transform: translateX(50%) rotateY(90deg);
		}
		div:nth-of-type(4) {
			transform: translateY(50%) rotateX(-90deg);
		}
		div:nth-of-type(5) {
			transform: translateX(-50%) rotateY(90deg);
		}
		div:nth-of-type(6) {
			transform: translateZ(-@box-z-translate);
		}
	}
}
@keyframes toScroll {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}
